import * as THREE from "three";
import vertex from "./shaders/vertex.glsl";
import fragment from "./shaders/fragment.glsl";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

let w = window.innerWidth;
let h = window.innerHeight;

const scene = new THREE.Scene();

const renderer = new THREE.WebGLRenderer({
    antialias: true,
});
renderer.setSize(w, h);
renderer.setClearColor(0xeeeeee, 1);
renderer.setAnimationLoop(animate);
document.body.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
// camera.position.set(50, 30, 40);
camera.position.set(-47.35299901197763, 14.732495496732739, 93.12935845918668);

const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.enableDamping = true;
// orbitControls.target.set(0, 0, 0);
orbitControls.target.set(-31.518164570569482, 2.7193083271830956, 71.24181803406006);

const loader = new GLTFLoader();
loader.load("/平面图-盒子.glb", (gltf) => {
    console.log('gltf', gltf.scene);
    const box = gltf.scene.children[0];

    const material = new THREE.ShaderMaterial({
        vertexShader: vertex,
        fragmentShader: fragment,
        uniforms: {
            iTime: params.time,
            // iResolution: params.resolution, 
        },
        side: THREE.DoubleSide,
        depthWrite:false,
        // depthTest:false,
        transparent:true
    })
    if(box instanceof THREE.Mesh) {
        box.material = material;
    }
    // scene.add(box);
    scene.add(gltf.scene);
});


const params = {
    time: { value: 0 },
    resolution: { value: new THREE.Vector2(w, h) },
}

function addPlane() {
    const planeGeometry = new THREE.PlaneGeometry(1, 1);
    const planeMaterial = new THREE.ShaderMaterial({
        vertexShader: vertex,
        fragmentShader: fragment,
        uniforms: {
            iTime: params.time,
            iResolution: params.resolution,
        },
        side: THREE.DoubleSide,
        transparent: true,
    });

    const plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.position.set(0, 0, 0);

    scene.add(plane);
}

function animate() {
    params.time.value += 0.01;
    orbitControls.update();
    renderer.render(scene, camera);
}

function addLight() {
    const ambientLight = new THREE.AmbientLight(0xffffff, 1.0); // 环境光
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 2); //默认平行光
    directionalLight.shadow.bias = -0.0005;
    directionalLight.position.set(100, 100, 100);
    directionalLight.name = "directionalLight";
    directionalLight.castShadow = true;
    directionalLight.shadow.mapSize.width = Math.pow(2, 13);
    directionalLight.shadow.mapSize.height = Math.pow(2, 13);

    const d = 1000;
    directionalLight.shadow.camera.left = -d;
    directionalLight.shadow.camera.right = d;
    directionalLight.shadow.camera.top = d;
    directionalLight.shadow.camera.bottom = -d;

    directionalLight.shadow.camera.far = 8000;
    directionalLight.shadow.camera.near = 10;

    scene.add(directionalLight);
}

function onWindowResize() {
    w = window.innerWidth;
    h = window.innerHeight;
    camera.aspect = w / h;
    camera.updateProjectionMatrix();
    renderer.setSize(w, h);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

    params.resolution.value = new THREE.Vector2(w, h);
}

function run() {
    // addPlane();
    addLight();
    animate();
    window.addEventListener("resize", onWindowResize);
    window.addEventListener("keydown", (e) => {
        if(e.key === " ") {
            console.log('Space', camera.position, orbitControls.target);
        }
    });
}
run();